<template>
  <div class="home" ref="homeRef"></div>
  <div v-if="props.showLegend" class="map-legend">
    <div class="map-legend-item">
      <div class="circle red"></div>
      <div class="text">区域综合类</div>
      <div class="num">{{ props.tipInfo.qyzhl}}</div>
    </div>
    <div class="map-legend-item">
      <div class="circle yellow"></div>
      <div class="text">特色主题类</div>
      <div class="num">{{props.tipInfo.tsztl}}</div>
    </div>
    <div class="map-legend-item">
      <div class="circle main"></div>
      <div class="text">基础保障类</div>
      <div class="num">{{ props.tipInfo.jcbzl}}</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch,} from "vue";
import hebei from "../../assets/hebei.json"
import {drawMap} from "../../util/chartUtil.js";

const homeRef = ref()
const mapName = ref("hebei")
const options = ref({
  // 提示浮窗样式
  tooltip: {
    show: true,
    trigger: "item",
    className: 'tooltip_style',
    formatter: function (params) {
      if (params.componentSubType === 'map') {
        return null
      }
      return `<div style="background-color: rgba(255,255,255,1);color: black;padding: 0.1vh 0.3vh;font-size: 1.2vh">${params.data.name}</div>`
    },
  },

  // 地图配置
  geo: [
    {
      map: 'hebei',
      layoutCenter: ['50%', '50%'], //地图位置
      layoutSize: '100%',
      label: {
        normal: {
          show: true,
          fontFamily: 'SourceHanSansCN',
          color: '#FEFEFE',
        },
        emphasis: {
          show: true,
          fontFamily: 'SourceHanSansCN',
          color: 'black',
        },
      },
      emphasis : {
        disabled : true
      },
      // tooltip:{} tooltip可结合formatter、div、css实现样式
      itemStyle: {
        normal: {
          borderColor: 'rgba(0,234,255,0.5)',
          borderWidth: 2,
          areaColor: {
            type: 'radial',
            x: 400,
            y: 400,
            r: 450,
            colorStops: [{
              offset: 0, color: 'rgb(26,88,173,0.5)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgb(71,199,254,0)' // 100% 处的颜色
            }],
            global: true // 缺省为 false
          }
        },
        emphasis: {
          borderColor: 'rgb(240,240,240)',
          borderWidth: 2,
          areaColor: 'rgb(6, 242, 244)',
        },
      },
      zlevel: 1,
      zoom: 1, //当前视角的缩放比例
      roam: true, //是否开启平游或缩放
      scaleLimit: { //滚轮缩放的极限控制
        min: 0.5,
        max: 4.5
      },
    }],
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo",
      symbol: "pin",
      legendHoverLink: true,
      // 这里渲染标志里的内容以及样式
      label: {
        show: true,
        formatter(value) {
          return value.data.item ? value.data.item : ""
        },
        color: "#fff",
        backgroundColor: 'rgba(6, 20, 40, 0.7)',
        padding: 3,
        // position: 'top',
        offset: [0, -20]
      },
      showEffectOn: "render",
      rippleEffect: {
        brushType: "stroke",
      },
      hoverAnimation: true,
      zlevel: 1,
      data: [],
    },
  ],
})
const props = defineProps({
  parenHandler : Function,
  data: Array,
  showLabel: Boolean,
  showLegend: Boolean,
  tipInfo : Object
})
let myMapChar;
const setData = () => {
  options.value.series[0].data =[]
  options.value.series[0].label.show = props.showLabel
  props.data.forEach(item => {
    let data = {
      compid:item.compid,
      name: item.title,
      value: [item.lng, item.lag],
      symbol: "image://" + item.symbol,
      symbolSize: [14, 14],
      item: item.item
    }
    options.value.series[0].data.push(data)
  })
  if(!myMapChar){
    myMapChar = drawMap(homeRef.value, options.value, mapName.value, hebei)
  }else{
    myMapChar.setOption(options.value);
    myMapChar.on("click",function(item){
      props.parenHandler(item.data)
    })
  }
}

watch(props, () => {
  setData()
})
watch(props.showLabel, () => {
  setData()
})

onMounted(() => {
  setData()
})


</script>
<style scoped lang="scss">
:deep(.tooltip_style) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .tooltip_box {
    width: 30vh;
    height: 24vh;
    background: url("../../assets/img/public/iconBackground.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 1.5vh;
  }

  .tooltip_title {
    height: 3vh;
    font-size: 1.8vh;
    font-weight: bold;
  }

  .tooltip_content {
    width: 100%;
    height: 18vh;
    padding: 0.5vh;
  }

  .tooltip_item {
    margin-top: 0.5vh;
    padding-left: 5%;
    width: 50%;
    height: 4vh;
    float: left;
    position: relative;
  }

  .tooltip_item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.75vh;
    width: 0.2vh;
    height: 1.5vh;
    background-color: rgb(0, 153, 255);
  }

  .tooltip_value {
    font-size: 1.6vh;
    font-weight: bold;
    line-height: 2.5vh;
  }

  .tooltip_remark {
    font-size: 1vh;
    color: rgb(200, 200, 200);
    line-height: 1.5vh;
  }
}

.home {
  margin-left: 10%;
  width: 85%;
  height: 80%;
}
.map-legend{
  bottom: 150px;
  .yellow{
    background: #C8A016;
  }
  .main{
    background: #2DB090;
  }
  .red{
    background: #B82830;
  }
}
.map-legend-item{
  .circle{
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin-right: 6px;
    margin-top: 2px;
  }
  .text{
    font-size: 14px;
  }
  .num{
    font-size: 14px;
    margin-left: 6px;
  }
}
</style>
